<template>
	<view class="header">
		<uni-card spacing="30rpx">
			<view class="in">
				<text>输入核销码</text>
				<input @click="inp"/>
				<button size="mini" @click="scan">识别</button>
			</view>
		</uni-card>
		<uni-card class="card">
			<view class="fs tac" style="padding: 30rpx 0;border-bottom: 6rpx solid #f8f8f8;">核销码MC1234-5678-9012</view>
			<view class="mtb" style="border-bottom: 6rpx solid #f8f8f8;">
				<view class="fs">服务内容</view>
				<view>XXX标准洗车服务包含</view>
				<view>整车泡沫冲洗擦T</view>
				<view>轮胎轮毅冲洗清洁</view>
				<view>车内吸尘</view>
				<view>内饰脚垫简单除尘</view>
				<view>(不包含虫户、水泥、沥青和顽固污渍清理等)</view>
			</view>
			<view class="mtb">
				<view class="fs">订单信息</view>
				<view>订单价格：¥30.00</view>
				<view>实付金额:¥25.00</view>
				<view>优忠金额:¥5.00</view>
				<view>订单编号 2020032554565799</view>
				<view>支付时间 2020.03.30 14:40:45</view>
				<view>预约时间2020.03.30 14:40</view>
			</view>
		</uni-card>
		<button class="bcb" size="mini" @click="dialogToggle">确认核销</button>

		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog"> >
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="核销此订单" content="
请您仔细核对订单，此操作不可撤销
请谨慎操作！" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const type = ref('center');
	const msgType = ref('success');
	const messageText = ref('这是一条成功提示');
	const value = ref('');
	const popup = ref(null);
	const message = ref(null);
	const alertDialog = ref(null);
	const inputDialog = ref(null);
	const share = ref(null);
	
	const inp = ()=>{
		uni.navigateTo({
			url: '/pages/yyy/Inputverification/Inputverification'
		});
		
	}
	const scan = ()=>{
		uni.navigateTo({
			url: '/pages/yyy/scan/scan'
		});
		
	}

	const change = (e) => {
		console.log('当前模式：' + e.type + ',状态：' + e.show);
	};

	const toggle = (newType) => {
		type.value = newType;
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		popup.value.open(newType);
	};

	const messageToggle = (newType) => {
		msgType.value = newType;
		messageText.value = `这是一条${newType}消息提示`;
		message.value.open();
	};

	const dialogToggle = (newType) => {
		msgType.value = newType;
		alertDialog.value.open();
	};

	const dialogConfirm = () => {
		console.log('点击确认');
		messageText.value = `点击确认了 ${msgType.value} 窗口`;
		// message.value.open();
		//在起始页面跳转到test.vue页面并传递参数
		uni.navigateTo({
			url: '/pages/yyy/operationwaing0/operationwaing0'
		});

	};

	const inputDialogToggle = () => {
		inputDialog.value.open();
	};

	const dialogClose = () => {
		console.log('点击关闭');
	};

	const dialogInputConfirm = (val) => {
		uni.showLoading({
			title: '3秒后会关闭'
		});

		setTimeout(() => {
			uni.hideLoading();
			console.log(val);
			value.value = val;
			// 关闭窗口后，恢复默认内容
			inputDialog.value.close();
		}, 3000);
	};

	const shareToggle = () => {
		share.value.open();
	};
</script>


<style>
	.header {
		background-image: url(@/static/lbgt.png);
		height: 30vh;
		padding: 10rpx;
	}

	.card {
		height: 75vh;
		position: relative;
	}

	.fs {
		font-size: 40rpx;
		font-weight: bold;
	}

	.tac {
		text-align: center;
	}

	.mtb view {
		margin: 15rpx 0;
	}

	.bcb {
		width: 500rpx;
		color: white;
		background-color: #0362e6;
		border-radius: 40rpx;
		margin-left: 120rpx;
	}

	.in{
		display: flex;
		justify-content: flex-start;
		position: relative;
	}
	.in text{
		width: 150rpx;
		color: #2d80f9;
		margin-top: 13rpx;
	}
	.in input{
		flex-grow: 1;
		height: 70rpx;
		border: 2rpx solid gainsboro;
		border-radius: 50rpx;
	}
	.in button{
		background-color: #2d80f9;
		color: white;
		border-radius: 50rpx;
		position: absolute;
		right: 6rpx;
		top: 6rpx;
	}
</style>